<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            background-color: #567895;
            border: 5px solid #0b385f;
            border-bottom-style: dashed;
            color: #fff;
        }

        h2 {
            border-top: 2px dotted rebeccapurple;
            border-bottom: 1em double rgb(24, 163, 78);
        }

        .shadow li {
            margin-top: 20px;
            list-style: none;
            width: 400px;
            padding: 10px;
            background: #eee;
        }

        .shadow .outset {
            box-shadow: 5px 5px rgba(0, 0, 0, .6);
        }

        .shadow .outset-blur {
            box-shadow: 5px 5px 5px rgba(0, 0, 0, .6);
        }

        .shadow .outset-extension {
            box-shadow: 5px 5px 5px 10px rgba(0, 0, 0, .6);
        }

        .shadow .inset {
            box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .6) inset;
        }

        .shadow .multiple-shadow {
            box-shadow:
                0 0 5px 3px rgba(255, 0, 0, .6),
                0 0 5px 6px rgba(0, 182, 0, .6),
                0 0 5px 10px rgba(255, 255, 0, .6);
        }
    </style>
</head>

<body>
    <div class="box">
        <h2>Borders</h2>
        <p>Try changing the borders.</p>
    </div>

    <br>

    <div style="border: solid 10px; border-radius: 10px 40px 40px 10px">
        <pre>
            border: solid 10px;
            border-radius: 10px 40px 40px 10px;
        </pre>
    </div>
    <br>
    <div style="border: solid 1em red; border-radius: 2em;">
        <pre>
            border: solid 10px red;
            border-radius: 20px;
        </pre>
    </div>
    <br>
    <h3>box-shadow效果</h3>
    <ul class="shadow">
        <li class="outset">外阴影常规效果<br />box-shadow:5px 5px rgba(0,0,0,.6);</li>
        <li class="outset-blur">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
        <li class="outset-extension">外阴影模糊外延效果<br />box-shadow:5px 5px 5px 10px rgba(0,0,0,.6);</li>
        <li class="inset">内阴影效果<br />box-shadow:2px 2px 5px 1px rgba(0,0,0,.6) inset;</li>
        <li class="multiple-shadow">外阴影模糊效果<br />box-shadow:5px 5px 5px rgba(0,0,0,.6);</li>
    </ul>
</body>

</html>